Web-based Dashboard Design with Open Source Platform

November 24, 2009 at 12:36 pm (OTHER TUTORIALS)
Tags: Programming

Achelia1 Elmi, Indri Juwita Asmara, Rini Wijayanti, Wildan Maulana, Yan Rianto

Development Research 1Pusat Science
Indonesian Institute of Sciences

elmiachelia@lipi.go.id

Abstraction

Keywords: Dashboard, DATA, INFORMATION, GRAPHICS, VISUALIZATION TECHNIQUES, OPEN SOURCE

1. INTRODUCTION

The availability of data stored in the database is the potential creation of a number of valuable information. In general, the data presented in the form of tables and graphs. Presentation and visualization of data is good and right and in accordance with the need to provide more information value for users. Along with the development of technology, electronic media and information systems, the Internet became one of the major media to deliver information. Presentation and visualization of data through the Internet allows to be made in the form of interactive, dynamic and exciting with animated effects. Some things to note in the presentation and visualization of data over the Internet, including bandwidth capacity and compatibility of technologies used, so that the data presented can be accessed and interpreted by both the user side.
Dashboard is one solution to the presentation and visualization of data. Dashboard is an interface model analogous information systems like the dashboard of a car that is easy to learn. Dashboard can communicate important information quickly. Each user requiring access to information is well structured and clear. Therefore, an effective dashboard design becomes very important. A good design for the presentation and data visualization will provide clarity about the important information conveyed to the user. With good design, that made dashboards will help users in identifying trends, patterns, and anomalies in data that can ultimately assist in effective decision making.
Dashboard is developed in this research using open source technology. Begins with the modeling data with JSON data model is then used as input for making graphs with Open Flash Chart. Graphs created with animated effects. Dashboard layout is made by using jquery which consists of 3 main elements of the UI jquery, jquery layout, and jquery SWFObject. The entire development process was framed in an open-source framework, which is Symfony. Dashboard is made to function displays graphics with animated effects and allows user interaction to customize the display layout information. The data displayed on the dashboard is a national science and technology indicators data for this dashboard is one component of an integrated system of national science and technology indicators are being developed.
Science Indicators is the result of survey activities R & D sector universities conducted by PAPPIPTEK-LIPI. Up to now been carried out survey activities 3 times for 3 consecutive years namely in 2005, 2006, and 2007. The survey was conducted at State Universities, Private Universities, Research Institutions, and Community Development Institute. One purpose of the survey activities to collect, process and present data R & D activities in universities. The data collected includes three things namely R & D expenditure data, human resources, R & D, and superficial research and development. Data and indicators of science and technology are the tools you need to see the development of science and technology in a country, whether for purposes of monitoring, planning and decision making. Science and technology indicators data presented in the form of graphs and tables. At present the data and science and technology indicators published in book form ‘National Science Indicators: Survey of Research and Development of Higher Education Sector 2007’ and the pocket book ‘Overview of Science and Technology in Indonesia’.
Dashboard under development is expected to be able to display graphs and tables as published in printed form but with an attractive shape. Dashbord is also expected to allow user interaction to set the layout of the information presented so that it will provide more information value than the presentation in book form. With interactive data presentation, attractive and dynamic in the form online is expected to expand the publication and utilization of science and technology indicators data.

2. DISCUSSION

JSON Data
JSON (JavaScript Object Notation) is a data exchange format lightweight, easy to read and written by humans, as well as easily translated and created (generated) by the computer. This format is based on part of the JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999. JSON is a text format that does not depend on any programming language that uses common language style used by the family C programmers including C, C, C #, Java, JavaScript, Perl, Python, etc.. Because of these properties, make ideal JSON-data exchange language.
JSON data is input to the OFC. JSON data format text data that will be faster when the loading process of the browser compared to other data formats. Figure 1 is a JSON data view. JSON data input can be obtained by writing the code in the page program, taken from the database query, or using a query from a query table. In this implementation, the data obtained from the query contained in query tables that have been available.

Figure 1. JSON Data
JSON by calling the data chart Open Flash Chart generator will produce a chart, either with the type of bar chart, line, pie, and so on. JSON data from the image above, will produce a pie chart.

Open Flash Chart
Open Flash Chart is a tool-based chart generator swf. This tool can be used to display data in graphical form with animation, however, the graph can also be stored in the form of image.
OFC provides various types of graphs. Each type of graph constructed by a class. Figure 2 is a graph of the above JSON data created using OFC_Chart_Pie class.

Figure 2. Sample image OFC.

Symfony
Symfony is an open source framework is a library of classes written in PHP programming language. Symfony provides an architecture, components and tools required to build a complex Web applications quickly.
A project in symfony framework consists of several applications. Each application is built from modules. Module itself contains the PHP code that represents the features of an application or a set of manipulations that can be done by the user on the object model.
Figure 3 shows the hierarchy of indicators-technology projects. Can be seen in the figure that the dashboard is one module of the application of indicators.

Figure 3. Structure project with Symfony framework.

On the dashboard module, there are actions, config, and templates. Action is undertaken indexSuccess.php display and store files in the form of image graphs. Config is the configuration used in the overall program. While the templates are files that will set the dashboard display.
The following program shows footage executeIndex function () on a file called file action.class.php the indexSuccess.php as the main file on the dashboard display and use the file as a template layout _dashboard_js.php.
public function executeIndex (sfWebRequest $ request)
(
…
$ this-> setLayout ( ‘dashboard’);
)
In the file there is function saveChartAction.class.php execute () which takes a graphics file with the command $ filename = $ _GET [ “name”]; and save the file in the destination variable $ destination.
Action in the form of a graph storage image files associated with templates _popup_chart.php and _setup_chart.php. In calling _popup_chart.php file dialog that will call zoom_chart function resizeChartOnZoomDialog () in _dashboard_js.php file that will display a graph on a portlet that can change the length and width, so the graphics are stored in the form of image can be resized. There are buttons on the portlet that calls the Save saveChartAction.class.php files. The following are excerpts of dialogue zoom_chart calling program.
$ ( “# zoom_chart”). dialog ((
…
resize: function (event, ui) (
resizeChartOnZoomDialog (id, newWidth, newHeight);
),
buttons: (
Save: function (event) (
…
post_image ( ‘zoomChart-‘ id, ‘/ dashboard / saveChart? name = tmp.png’, false);
),
Cancel: function () (
…
)
),
close: function () (
…
)
));
_setup_chart.php File layout customization done by adding a chart title, legend text, and the y-axis properties.
In the config file is called view.yml a javascript function that is required jQuery.SWFobject, json, and the dashboard layout as in the following program fragment
javascripts: [
jquery.swfobject.min.js,
json2.js,
dashboard.js.php
]
On the templates there are also a function _embed.php files to generate links to embedded graphics on another site.

Dashboard
Dashboard layout is made by using jquery. Jquery is a short JavaScript Library that simplifies the HTML document in writing, event handling, animation, and interactions with Ajax. Jquery consists of 3 main elements of the UI jquery, jquery layout, and jquery SWFObject.
Jquery jquery UI is a library that handles the display user interface. Jquery layout is a plug-in to create the look desired user interface, with features such as easy to use, allowing customization, extensible, hideable, resizeable, and is compatible with any other widget jquery. Figure 4 is a layout view with jQuery.

Figure 4. jQuery Layout.
Display jQuery layout is divided into 5 panes, namely North, West, Center, East, and South. Properties of each pane can be set by writing a line of code in the file as an example footage _dashboard_js.php under this program.
var layoutSettings_Outer = (
name: “mainLayout”,
defaults: (
size: “auto”,
minSize: 50,
paneClass: “pane”,
…
),
north: (
spacing_open: 1,
togglerLength_open: 0,
togglerLength_closed: -1,
resizable: false,
slidable: false,
fxName: “none”
),
west: (
…
),
center: (
…
),
);

On the dashboard, North pane is used for header website, West pane used for menu namely Accordion menu, center pane used to display graphics, while the East and South pane is removed.
Jquery SWFObject is a plug-in as an add-on jquery that provide unique functions in the store SWFObject Flash content using jquery’s internal API. SWFObject is an easy method to use and standards-friendly to store content in a reliable flash in the browser. Use the SWFObject jquery to display graphics with animation made with the OFC.
A graph is displayed on a portlet in the dashboard. Figure 5 is an example of a graphical display on the portlet. In portlet also found that functions of the picture tools appear in the upper right corner.

Figure 5. Portlet that displays graphics.
Tool that can be used to close the portlet tools, tools to customize the graph view, the tool to resize and save the graph in image form, tool for comments, tools for embedded graphics, and tools to minimize portlet.
Dashboard can be displayed on more than one portlet that election conducted by the user. Thus the information presented will be compatible with user needs. Figure 6 shows the dashboard layout with few graphics. Menu on the dashboard is made in accordance with the classification of data and technology indicators.

Figure 6. Dashboard view.

3. CLOSING

Dashboard has been developed to fulfill the main functions required of an interactive graphic presentation by involving users in setting layout information. However, for graphs that have accompanied the data displayed in table form.
Graphic information layout settings are also not stored and are tagged as a particular category. If it can be met it would be easier for users to create specific categories that can be accessed without having to repeat over and over in the selection graph.
The direction of further development of complementary functions that have not been met. It is also necessary to create a dashboard of a generic system where graphs and tables shown is diinputkan queries directly by users.
4. Bibliography

[1]. “National Science Indicators: Survey of Research and Development of Higher Education Sector 2007”, Development Research Center for Science-LIPI, 2008.
[2]. “Science and Technology in Indonesia at a Glance 2008”, Development Research Center for Science-LIPI, 2008.
[3]. Few, Stephen. Information Dashboard Design: The Effective Visual Communication of Data. O’Reilly.
[4]. Open-Source PHP Web Framework. http://www.symfony-project.org/.
[5]. jQuery SWFObject Plugin. http://jquery.thewikies.com/swfobject/.
[6]. Open Flash Chart Tutorial. http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php.
[7]. UI.Layout jQuery Plugin. http://layout.jquery-dev.net/index.html.
[8]. Brath, Richard and Michael Peters. Dashboard Design: Why Design is Important.

www.information-management.com/infodirect/20041015/1011285-1.html.

Free Computer Science